<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <#include "/inc/nav.ftl"/>
    <@nav/>
    <div id="page-wrapper">
        <!--<div class="row">-->
            <!--<div class="col-lg-12">-->
                <!--&lt;!&ndash;<div class="panel-body">&ndash;&gt;-->
                    <!--&lt;!&ndash;<button id="btn-add" type="button" class="btn btn-success">添加订单</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button id="btn-edit" type="button" class="btn btn-warning">修改订单信息</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button id="btn-del" type="button" class="btn btn-danger">删除订单</button>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</div>-->
            <!--&lt;!&ndash; /.col-lg-12 &ndash;&gt;-->
        <!--</div>-->
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">订单列表</div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <table width="100%" class="table table-striped table-borderdetailed table-hover" id="list">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>订单头ID</th>
                                <th>菜品名</th>
                                <th>单价</th>
                                <th>份量</th>
                                <!--  <th>餐桌信息</th> -->
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Scripts  -->
<script>
    $(document).ready(function() {

        var table = $('#list').DataTable({   //此处list与页面table的id相同
            ajax: '${contextPath}/orderDetail/list',
            language: {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
            },
            columns: [
                {data: "id","visible" : true},
                {data: "orderListId"},
                {data: "commodityName"},
                {data: "price"},
                {data: "qty"}
            ],
            responsive: true,
            select: true //datatables select 插件
        });








    });
</script>
</body>

</html>